<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>失去焦点</title>
    <style rel="stylesheet" type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        span {
            color: azure;
        }
        ul li{
            float: left;
            display: inline;
        }
        ul li:nth-child(2),li:nth-child(3){
            margin-left: 30px;
        }
        ul{
            display: inline-block;
        }
        .div_height{
            height: 1000px;
            border: 1px solid red;
        }
    </style>
    <script type="text/javascript">
        window.addEventListener("load", function () {
            username = document.getElementById("username");
            pass = document.getElementById("pass");
            span = document.getElementsByTagName("span");
            username.addEventListener("blur", function () {
                var user = username.value;
                if (user.length > 0) {
                    console.log("123");
                    username.style.borderColor = "red";
                    span[0].innerHTML = "长度不应大于0";
                }
            });
            pass.addEventListener("blur", function () {
                var password = pass.value;
                if (password.indexOf("@")!==-1) {
                    console.log("123");
                    pass.style.borderColor = "red";
                    span[1].innerHTML = "不能含有特殊符号";
                    console.log(password.charAt(0));
                }
                var o=getScroll(window);
                console.log(o.x);
                console.log(o.y);
            });
            var li =document.querySelectorAll("li");
            for (i in li){
                li[i].onmouseover=function () {
                    this.style.color="red";
                };
                li[i].onmouseout=function () {
                    this.style.color="black";
                };
            }


            function getScroll(w) {
                var w=w|window;
                var d=w.document;
                if (pageXOffset!=null){
                    return{x:pageXOffset,y:pageYOffset};
                }
                if (d.compatMode=="CSS1compat"){
                    return {x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};
                }
                return {x:d.body.scrollLeft,y:d.body.scrollTop}
            }

        })
    </script>
</head>
<body>
<ul>
    <li>首页</li>
    <li>推荐</li>
    <li>分类</li>
</ul>
<div class="div_height"></div>
<form>
    <div>用户名：<input id="username"><span></span></div>
    <div>密码：<input type="password" id="pass"><span></span></div>
</form>
</body>
</html>